/**
 * These are style overrides for Vue Styleguidist
 * (the odd formatting hence most of the classes are dynamic)
 */

@import "../src/assets/tokens/tokens.scss";
@import "./docs.tokens.scss";
@import "../src/styles/styles.scss";

/* LOCAL DESIGN TOKENS
--------------------------------------------- */

$docs-grey: #c4cdd5;
$docs-grey-dark: #4d5865;
$docs-status-ready: #7cb518;
$docs-breakpoint: 800px;
$docs-breakpoint-small: 600px;
$docs-color-heading: rgb(30, 30, 30);
$docs-color-text: shade($color-silver, 70%);

/* BASE
--------------------------------------------- */

// Background of page
div.rsg--root-1 {
  background: $color-white;
}

// Main content
main[class^="rsg--content"] {
  display: block; /* IE11 fix */
  padding: $space-s $space-xl;
  @media (max-width: #{$docs-breakpoint}) {
    padding: $space-s $space-m;
  }
}

// Resetting margins for Styleguidist
header[class^="rsg--header"] > div[class^="rsg--wrapper"],
section > div[class^="rsg--wrapper"] + article[class^="rsg--root"],
article[class^="rsg--root"] div[class^="rsg--root"] {
  margin: 0 !important;
}

// Display rsg--roots as flex
main section section > div > div[class^="rsg--root"] {
  display: flex;
  flex-direction: column;
}

/* TYPOGRAPHY
--------------------------------------------- */

// Link color
div[class^="rsg--root"] a[class^="rsg--link"] {
  color: $color-bleu-de-france;
  &:hover {
    color: $color-bleu-de-france-dark;
  }
}

// Main headings
// (includes h2 as well since in component views that’s the first heading)
div[class^="rsg--wrapper"] > h1[class^="rsg--heading"],
div[class^="rsg--wrapper"] > h2[class^="rsg--heading"] {
  display: block;
  border: 0;
  line-height: $line-height-s;
  padding: $space-xl $space-xl;
  width: calc(100% + #{$space-xl * 2});
  margin: -#{$space-s} -#{$space-xl} $space-l -#{$space-xl};
  background: $color-cloud;
  font-size: $size-xxl;
  a:hover {
    text-decoration: none;
    cursor: default;
  }
  @media (max-width: 1300px) {
    padding: $space-l $space-xl;
  }
  @media (max-width: #{$docs-breakpoint}) {
    font-size: $size-xl / 1.2;
    width: calc(100% + #{$space-xl});
    padding: $space-l $space-m;
    margin: -#{$space-s} -#{$space-m} $space-m;
  }
}

// Remove extra margins from all headers
header[class^="rsg--header"] {
  margin: 0;
}

// Links inside h1
div[class^="rsg--wrapper"] > h1[class^="rsg--heading"] a {
  font-weight: $weight-normal;
  color: $color-oxford-blue;
  letter-spacing: -1px;
  &:hover {
    text-decoration: none;
    cursor: default;
  }
}

// Heading, level 2
h2[class^="rsg--heading"] {
  border-bottom: 1px solid $docs-grey;
  padding-bottom: $space-s;
  margin: $space-l 0 $space-m;
  font-size: $size-xl;
  line-height: $line-height-s;
  font-weight: $weight-normal;
  letter-spacing: -0.5px;
  width: 100%;
  @media (max-width: #{$docs-breakpoint}) {
    font-size: $size-xl / 1.3;
  }
  @media (max-width: #{$docs-breakpoint-small}) {
    font-size: $size-xl / 1.6;
  }
  a {
    color: $docs-color-heading;
  }
}

// Heading, level 3
h3[class^="rsg--heading"],
h3[class^="rsg--heading"] a {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-weight: $weight-light;
  line-height: $line-height-m;
  margin: 0 0 $space-l;
  font-size: $size-l;
  color: $docs-color-text;
  @media (max-width: #{$docs-breakpoint}) {
    font-size: $size-l / 1.2;
    margin: 0 0 $space-m;
  }
}

// Heading, level 4
h4[class^="rsg--heading"],
h4[class^="rsg--heading"] a {
  font-weight: $weight-semi-bold;
  letter-spacing: 0;
  margin: $space-l 0 $space-m;
  font-size: $size-l;
  line-height: $line-height-s;
  color: $docs-color-heading;
}

// Paragraphs
p[class^="rsg--para"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $docs-color-text;
  margin-bottom: $space-s;
  line-height: $line-height-m;
  strong a[class^="rsg--link"] {
    font-weight: $weight-semi-bold;
  }
  code {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    background: tint($docs-grey, 75%);
    color: shade($color-silver, 20%);
    padding: $space-xx-small;
    border-radius: $radius-default;
    font-size: 87.5%;
  }
  a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  pre + & {
    margin-top: $space-s;
  }
}

// Type layout adjustments
div[class^="rsg--docs"],
p[class^="rsg--para"],
h3[class^="rsg--heading"],
h4[class^="rsg--heading"] {
  max-width: 800px;
  width: 75%;
  p[class^="rsg--para"] {
    width: 100%;
  }
  @media (max-width: 1300px) {
    width: 100%;
  }
}

// Paragraphs inside table cells
td[class^="rsg--cell"] p {
  width: 100%;
}

/* SIDEBAR
--------------------------------------------- */

// Sidebar logo
div[class^="rsg--logo"] {
  @include inset-space($space-m);
  border-bottom: 1px solid rgba($color-white, 0.1);
  h1 {
    color: tint($color-bleu-de-france, 90%);
    font-weight: $weight-normal;
  }
}

// Sidebar version
p[class^="rsg--version"] {
  @include inset-squish-space($space-xs);
  margin: $space-xs 0 0;
  color: $color-bleu-de-france;
  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  font-weight: $weight-normal;
  display: inline-block;
  line-height: $line-height-xs;
  border: 1px solid $color-bleu-de-france;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: $size-xs;
  border-radius: $radius-default;
}

// Sidebar search
div[class^="rsg--search"] input {
  @include inset-squish-space($space-s);
  color: $color-white;
  border: 1px solid transparent;
  background: mix($color-bleu-de-france, $color-rich-black, 20%);
  &:focus {
    border: 1px solid $color-bleu-de-france;
    &::-webkit-textfield-decoration-container {
      display: none !important;
    }
    &::-webkit-contacts-auto-fill-button {
      display: none !important;
    }
  }
  &::-webkit-input-placeholder {
    color: rgba(mix($color-white, $color-bleu-de-france, 50%), 0.35);
  }
  &:-ms-input-placeholder {
    color: rgba(mix($color-white, $color-bleu-de-france, 50%), 0.35);
  }
  &::-moz-placeholder {
    color: rgba(mix($color-white, $color-bleu-de-france, 50%), 0.35);
    opacity: 1;
  }
}

// Sets sidebar background
div[class^="rsg--sidebar"] {
  background: mix($color-bleu-de-france, $color-rich-black, 5%);
  border: 0;
  @media (max-width: #{$docs-breakpoint}) {
    padding-bottom: $space-l;
  }

  // Sidebar sub navigations
  ul ul[class^="rsg--list"] {
    display: none;
    &.vueds-visible {
      display: block;
    }
  }

  // Sidebar list item
  li[class^="rsg--item"] {
    margin: 0;
    display: block;
  }

  // Sidebar first level links
  a[class^="rsg--link"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: $space-xx-small $space-m;
    font-weight: $weight-semi-bold;
    color: $color-bleu-de-france;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &:hover {
      color: $color-bleu-de-france-lighter;
    }
    &:active {
      color: $color-bleu-de-france-dark;
    }
  }

  // Sidebar active link
  .vueds-active {
    ul[class^="rsg--list"] {
      display: block;
    }
    & > a,
    & > a:hover {
      color: tint($color-bleu-de-france, 80%);
    }
  }

  // Sidebar list
  ul[class^="rsg--list"] {
    padding-left: 0;

    // Sidebar sub-list
    ul {
      padding-left: $space-s;
      line-height: $line-height-s;
      @media (max-width: #{$docs-breakpoint-small}) {
        padding: 0 0 0 $space-l;
        width: 90%;

        // Sidebar sub-list item
        li {
          display: inline;
          line-height: $line-height-m;
        }
      }

      // Sidebar second level link
      a[class*="rsg--link"] {
        font-size: $size-s;
        font-weight: $weight-normal;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
        @media (max-width: #{$docs-breakpoint-small}) {
          float: left;
          padding: 0 $space-xs 0 0;
        }
      }
    }
  }
}

/* CODE & COMPONENT PREVIEWS
--------------------------------------------- */

// Previews of the components
div[class^="rsg--preview"] {
  padding: $space-l / 1.2;
  background-color: tint($docs-grey, 90%);
  border: 1px solid tint($docs-grey, 50%);
  box-shadow: inset 0 0 $space-xs rgba($color-rich-black, 0.05);
  margin: $space-s 0 0;
  border-radius: 0;
  display: block;
  width: 100%;
  border-top-left-radius: $radius-default;
  border-top-right-radius: $radius-default;
}

// If you edit the component categories, you have to edit
// these to match as well.
div[data-preview="Elements"],
div[data-preview="Patterns"],
div[data-preview="Templates"] {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: 0;

  // This hides code previews from the above examples
  & + div + div[class^="rsg--tab"] {
    display: none !important;
  }
}

// Clearfix to take care of floated content inside previews
div[data-preview]:after {
  content: "";
  display: table;
  clear: both;
}

// Code tabs and table
div[class^="rsg--tabs"],
table[class^="rsg--table"] {
  margin-bottom: $space-s;
  overflow-x: auto;
}
thead[class^="rsg--tableHead"] {
  border: 0;
}

// Codemirror and markdown code blocks
pre[class^="rsg--pre"],
.vueds-html.cm-s-night.CodeMirror,
.react-codemirror2 .CodeMirror.CodeMirror {
  background: mix($color-bleu-de-france, $color-rich-black, 10%);
  border-bottom-left-radius: $radius-default;
  border-bottom-right-radius: $radius-default;
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  height: auto;
  border: 0;
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  font-size: $size-s;
  margin: 0;
  min-height: $space-xxl / 1.5;
  margin-bottom: $space-m;
  color: $color-white;
  padding: $space-m;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
  .CodeMirror-scroll,
  .CodeMirror-vscrollbar {
    overflow: hidden;
  }
  code {
    color: $color-white;
  }
}

// HTML preview needs some padding adjustments to match Styleguidist
.vueds-html.cm-s-night.CodeMirror {
  padding-left: $space-m - 4px;
}

// VUE & HTML Code tabs
div[class^="rsg--tab"] {
  position: relative;
  .vueds-tabs {
    z-index: 5;
    border-radius: $radius-default;
    box-shadow: 0 2px 8px rgba($color-rich-black, 0.8);
    overflow: hidden;
    position: absolute;
    top: $space-m;
    right: $space-m;
    .vueds-tab {
      border: 0;
      margin: 0;
      letter-spacing: $spacing-l;
      font-size: $size-s;
      font-weight: $weight-normal;
      font-family: $font-text;
      line-height: $line-height-s;
      @include inset-squish-space($space-s);
      cursor: pointer;
      background: mix($color-bleu-de-france, $color-rich-black, 50%);
      color: $color-white;
      &:active {
        background: mix($color-bleu-de-france, $color-rich-black, 45%);
      }
      &:focus {
        outline: none;
      }
      &--active {
        background: mix($color-bleu-de-france, $color-rich-black, 40%);
        box-shadow: inset 0 2px 8px rgba($color-rich-black, 0.2);
      }
    }
  }
}

// Hidden HTML/VUE code preview
.vueds-hidden {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  top: -10000px;
  left: 0;
  position: absolute !important;
}

// Fixes a few layout bugs with CodeMirror
.CodeMirror-scroll.CodeMirror-scroll {
  overflow: hidden !important;
}

// Code highlighting for both CodeMirror and Markdown files
.hljs-variable,
.hljs-selector-class,
.cm-s-night span.cm-variable,
.cm-s-night span.cm-variable-2,
.cm-s-night span.cm-bracket,
.cm-s-night span.cm-tag,
.hljs-tag,
.hljs-name {
  color: $color-bleu-de-france-light !important;
}
.hljs-attribute,
.hljs-keyword,
.hljs-attr,
.cm-s-night span.cm-operator,
.cm-s-night span.cm-number,
.cm-s-night span.cm-attribute {
  color: $color-ucla-gold-light !important;
}
.cm-s-night span.cm-string,
.hljs-string {
  color: lighten($docs-status-ready, 20%) !important;
}

// Code highlighting elsewhere
span[class^="rsg--type"],
code[class^="rsg--code"] {
  color: $color-silver;
}
span[class^="rsg--name"] code[class^="rsg--code"],
code.name {
  font-weight: $weight-bold;
  color: shade($color-silver, 50%);
}
span[class^="rsg--type"] code[class^="rsg--code"],
code.type {
  background: tint($docs-grey, 75%);
  color: shade($color-silver, 20%);
  padding: $space-xx-small;
  border-radius: $radius-default;
}

/* COMPONENT STATUS LABELS
--------------------------------------------- */

// Here we’re setting a custom order for Styleguidist’s pieces
header[class^="rsg--header"] {
  order: 2;
}
div[class^="rsg--docs"],
article[class^="rsg--root"],
button[class^="rsg--button"] {
  order: 3;
}
div[class^="rsg--root"] div[class^="rsg--tabs"] {
  order: 4;
}

// Status label is shown in top right corner for each component
.status {
  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  font-weight: $weight-normal;
  order: 1;
  align-self: flex-end;
  cursor: help;
  line-height: $line-height-xs;
  background: tint($docs-grey, 50%);
  padding: $space-xs $space-s $space-xs/1.2;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: $size-xs;
  border-radius: $radius-default;
  color: $color-rich-black;
  position: absolute;
  right: $space-xl;
  top: $space-xl * 1.2;
  z-index: 2;
  @media (max-width: 1300px) {
    top: $space-xl;
  }
  @media (max-width: #{$docs-breakpoint}) {
    top: $space-l * 1.2;
    right: $space-m;
  }
  &-ready {
    background: $docs-status-ready;
    color: $color-white;
  }
  &-review,
  &-under-review {
    background: $color-ucla-gold;
    color: $color-rich-black;
  }
  &-prototype {
    background: $color-bleu-de-france;
    color: $color-white;
  }
  &-deprecated {
    background: $color-vermilion;
    color: $color-white;
  }
}

/* TABLES
--------------------------------------------- */

// Global tr setting so that vueds custom components use this as well
tr {
  transition: background-color 0.1s ease;
  &:hover {
    background: rgba($color-cloud, 0.3);
  }
}

table[class^="rsg--table"] {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  th {
    padding: $space-s $space-l $space-s $space-s;
    font-size: $size-s;
    font-weight: $weight-semi-bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    background: $color-cloud;
    color: tint($color-oxford-blue, 10%);
    text-align: left;
  }
  th[class^="rsg--cellHeading"],
  td {
    padding: $space-s $space-l $space-s $space-s;
    background: transparent;
  }
  td {
    font-size: $size-s;
    padding: $space-s $space-l $space-s $space-s;
    &:first-child {
      font-weight: $weight-bold;
      white-space: nowrap;
    }
  }
  tr {
    border-bottom: 1px solid tint($docs-grey, 50%);
  }
  tbody tr:last-child {
    border-bottom: 0;
  }
}

thead[class^="rsg--thead"] {
  th:first-child {
    border-top-left-radius: $radius-default;
    border-bottom-left-radius: $radius-default;
  }
  th:last-child {
    border-top-right-radius: $radius-default;
    border-bottom-right-radius: $radius-default;
  }
}

/* HIDDEN STYLEGUIDIST FUNCTIONALITY
--------------------------------------------- */

div[class^="rsg--tabButtons"],
div[class^="rsg--controls"],
div[class^="rsg--pathline"],
footer[class^="rsg--footer"],
div[class^="rsg--toolbar"] {
  display: none !important;
}

/* HIDDEN FUNCTIONALITY
--------------------------------------------- */

// Hide private components
.hide-private,
.hide-private + div,
a[href="#private-components"],
a[href="#private-components"] + ul {
  display: none !important;
}

// Hide Private components and placeholder sections
ul a[href*="/#/Getting Started/Components"],
ul a[href*="/#/Design Tokens/Color"],
ul a[href*="/#/Design Tokens/Spacing"],
ul a[href*="/#/Design Tokens/FontSize"],
ul a[href*="/#/Design Tokens/All"],
ul a[href*="/#/Private Components"] {
  display: none !important;
}
